<template>
	<view class = "detail">
		<view class = "wrap">
			<text class = "title">反馈时间:</text>
			<text class = "time">{{time}}</text>
		</view>
		<view class = "wrap">
			<text class = "title">反馈类型:</text>
			<text class = "type">{{type}}</text>
		</view>
		<view class = "content-wrap">
			<text class = "title">反馈内容:</text>
			<view class = "content">{{content}}</view>
		</view>
		<view class = "content-wrap">
			<text class = "title">回复:</text>
			<view class = "content">
				<template v-if="returnContent == null">
					暂无回复
				</template>
				<template v-else>
					{{returnContent}}
				</template>
			</view>
		</view>
		<!--  修改 臧锡洋 V2 -->
		<view class="before-question" v-if="status == 1" :style="[status == 1 ? 'display:none;' : '']">
			<view class="question-title">
				别着急!正在加紧处理您的反馈内容哟!
			</view>
			<u-button type="error"  @click="resolvedButtonClick" :custom-style="customStyle">我已解决</u-button>
		</view>
		<!-- 当管理员回复后显示该按钮 -->
		<view class="question" style = "text-align: center;" v-if="status == 2">
			该回复是否已解决您的问题？
		</view>
		<view class="button" v-if="status == 2">
			<view class= "resolve" @click = "onLeftClick">已解决</view>
			<view class= "resolve" @click = "onRightClick">未解决</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			// 页面加载
			// 修改 : 臧锡洋 2020年11月26日 21:26:40  V2
			if(options.id != null){
				this.id = options.id
				this.$u.api.getReturnDetailById(options.id).then(res=>{
					console.log(res)
					this.time = res.data.createTime
					switch(res.data.type){
						case 1:
							this.type = '建议'
							break;
						case 2:
							this.type = '故障'
							break;
						case 3:
							this.type = '帐号问题'
							break;
						case 4:
							this.type = '其他'
							break;
					}
					this.content = res.data.content
					this.returnContent = res.data.reply
					this.status = res.data.status
				})
			}	
			
		},
		data() {
			return {
				id: '',
				time:"",
				type:"",
				content:'',
				returnContent:'',
				status: '',
				customStyle: {
					width: '300px'
				},
			}
		},
		methods: {
			onLeftClick(){
				console.log("已解决！！" + this.id);
				let param = {
					id: this.id,
					solveStatus: 1 //已解决
				}
				this.$u.api.confirmResolveStatus(param).then(res=>{
					uni.showModal({
						title:"提示",
						content:"反馈成功!当前问题已为您解决!",
						showCancel:false,
						success: () => {
							this.status = 3
							// 重新载入反馈列表
							uni.navigateBack()
						}
					})
				})
			},
			onRightClick(){
				console.log("未解决！！");
				let param = {
					id: this.id,
					solveStatus: 2 ,//未解决
				}
				this.$u.api.confirmResolveStatus(param).then(res=>{
					uni.showModal({
						title:"提示",
						content:"我们将在第一时间通过电话等其他方式联系到您，为您排忧解难!",
						success: () => {
							this.status = 4
							uni.navigateBack()
						}
					})
				})
			},
			resolvedButtonClick(){
				this.$u.api.confirmClose(this.id).then(res =>{
					console.log(res);
					uni.showModal({
						title:"提示",
						content:"您取消了这次反馈!",
						success: () => {
							this.status = 5;
							uni.navigateBack();
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail{
		width: 90%;
		height: 480px;
		margin: 10px auto;
		background: #fff;
		border-radius: 10px;
		position: relative;
		overflow: hidden;
		.wrap{
			width:100%;
			height:39px;
			border-bottom: 1px solid #DCDCDC;
			line-height: 39px;
			padding:0 10px;
			.title{
				// float:left;
			}
			.time{
				font-size: 12px;
				// float:right;
				margin-left:10px
			}
			.type{
				color:#2979FF;
				// float:right;
				margin-left:10px ;
			}
		}
		.content-wrap{
			width:100%;
			height:150px;
			border-bottom: 1px solid #DCDCDC;
			line-height: 39px;
			padding:0 10px;
			.content{
				background: #F5F5F5;
				width: 90%;
				height: 100px;
				margin: 0 auto;
				border-radius: 8px;
				padding:10px;
				line-height: 20px;
				text-indent: 10px;
			}
		}
		.before-question{
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: column;
			width: 100%;
			height: 100px;
			padding: 30rpx;
			font-size: 16px;
			line-height: 18px;
		}
		.question{
			width:100%;
			height:39px;
			// border-bottom: 1px solid #DCDCDC;
			line-height: 39px;
			padding:0 10px;
		}
		.button{
			width: 100%;
			height: 40px;
			position: absolute;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			.resolve{
				width: 50%;
				height: 40px;
				font-size:16px;
				outline-style: none;
				border: 1px solid #fff;
				text-align: center;
				line-height: 40px;
				background: rgb(250,229,79);
				border-radius: 0px 0px 0px 10px;
				&:nth-child(2){
					border-radius: 0px 0px 10px 0px;
				}
			}
		}
	}
</style>
